<template>
  <div class="c-bg-sgray">
    <shop-comment-com :subComment="detail" :showType="2" @delectComment='delectComment' @updateComment='updateComment' @deleteExtra='deleteExtra' @editExtra='editExtra'></shop-comment-com>
    <div class="c-pf c-bg-white c-p-b0 c-maxw640 c-p-l0 c-p-r0 c-mlr-auto" v-if="detail && detail.length == 1 && isShowOpciton">
      <div class="c-fc-gray c-fs22 theme-fc c-lh32 c-pv12 theme-bg-10 c-textAlign-c" v-if="isShowUpdate == 0">首评30天内您还可以修改评价</div>
      <div class="c-pv16 c-ph24 c-flex-row c-justify-end c-aligni-center">
        <div class="c-fs22 c-lh32 c-pv8 c-ph24 c-br24 c-bd1-ccc c-fc-xblack" @click="addExtraComment" v-if="detail[0].extra && detail[0].extra.status == 0">追加评价</div>
        <div class="c-fs22 c-lh32 c-pv8 c-ph24 c-br24 c-bd1-ccc c-fc-xblack c-ml24" @click="updateComment" v-if="isShowUpdate == 0">修改评价</div>
        <div class="c-fs22 c-lh32 c-pv8 c-ph24 c-br24 theme-bd1 theme-fc c-ml24" @click="delectComment">删除评价</div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import ShopCommentCom from "@/components/templates/shopCommentCom.vue";
export default {
  name: 'ShopCommentDetail',
  components: {
    ShopCommentCom
  },
  data() {
    return {
      id: '',
      detail: null,
      type: 1, // 1是订单评价详情2是评价详情
      isShowOpciton: false, // 评价时间是否在30天内
      isShowUpdate: 0, // 评价时间是否修改过 0未修改/1修改过
    }
  },
  methods: {
    // 添加追加评价
    addExtraComment() {
      this.$routerGo(this, "push", {
        path: "/mall/shopComments/addShopComment",
        query: ({
          goId: this.detail[0].goId, // 订单id
          gsiiId: this.detail[0].gsiiId, // 规格id
          mgId: this.detail[0].mgId, // 商品id
          id: this.detail[0].id, // 原评价id
          type: 1, // 添加评价
          isExtra: 1, // 追加评价
        })
      });
    },
    // 编辑追加评价
    editExtra(data) {
      if (data) {
        localStorage.setItem('commentDetail', JSON.stringify([data]));
      }
      this.$routerGo(this, "push", {
        path: "/mall/shopComments/addShopComment",
        query: ({
          id: data ? data.id : '',
          type: this.type == 1 ? 2 : 3 // 2订单只有一个商品的评价、3订单多条评价去单独选择
        })
      });
    },
    // 判断评价时间是否在30天内
    checkTime(createTime) {
      let isTest = window.location.href.indexOf('http://kptest') > -1 || window.location.href.indexOf('https://kptest') > -1; // 正式平台用30天，测试平台用30分钟
      let createT = utilJs.getTimeByDate(createTime) / 1000;
      let judgeTime = isTest ? (30 * 60) : (30 * 24 * 60 * 60);
      let currentT = Date.parse(new Date()) / 1000;
      let diffTime = (currentT - createT) < judgeTime ? true : false;
      if (diffTime) {
        this.isShowOpciton = true;
      } else {
        this.isShowOpciton = false;
      }
    },
    // 修改评价
    updateComment(arr) {
      let data = this.detail[0];
      data.extra = null;
      localStorage.setItem('commentDetail', JSON.stringify([data]));
      this.$routerGo(this, "push", {
        path: "/mall/shopComments/addShopComment",
        query: ({
          id: data ? data.id : '',
          type: this.type == 1 ? 2 : 3 // 2订单只有一个商品的评价、3订单多条评价去单独选择
        })
      });
    },
    // 删除评价
    delectComment(id) {
      let optionId = typeof id == 'number' ? id : this.detail[0].id;
      let that = this;
      that.$cjConfirm({
        title: '', //
        titleCenter: true, //标题是否居中
        message: '删除后无法再次评价，确定删除该评价？',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '取消', //取消按钮文本
        confirmButtonText: '确定', //确认按钮文本
        onConfirm() {
          utilJs.getMethod(
            global.apiurl + "goods/deleteComment/" + optionId, (res) => {
              that.$showCjToast({
                text: res,
                type: "success",
                time: 1000
              });
              that.$routerGo(that, "replace", { path: "/member/myOrder/allOrderList" });
            }
          )
        },
        onCancel() {
        },
      })
    },
    // 删除追问评价
    deleteExtra(id) {
      let that = this;
      that.$cjConfirm({
        title: '', //
        titleCenter: true, //标题是否居中
        message: '删除后无法再次追评，确定删除该评价？',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '取消', //取消按钮文本
        confirmButtonText: '确定', //确认按钮文本
        onConfirm() {
          utilJs.postMethod(global.apiurl + "goods/deleteCommentExtra", {mceId: id}, (res) => {
              that.$showCjToast({
                text: res,
                type: "success",
                time: 1000
              });
              that.getCommentsDetail();
            }
          )
        },
        onCancel() {
        },
      })
    },
    // 星级评价
    showStars(num, index) {
      let stars = document.getElementById('starsBox' + (index));
      if (!stars) {
        return
      }
      for (let i = 0; i < 5; i++) {
        stars.getElementsByTagName('span')[i].classList.remove('theme-fc');
      }
      for (let i = 0; i < num; i++) {
        stars.getElementsByTagName('span')[i].classList.add('theme-fc');
      }
      return index;
    },
    // 查看订单评价详情
    getOrderComment() {
      utilJs.getMethod(global.apiurl + "goods/orderCommentDetail/" + this.id, res => {
        this.detail = res ? res : [];
        this.detail.forEach((item, index) => {
          if (this.detail && this.detail.length == 1) {
            this.checkTime(item.createdAt);
            this.isShowUpdate = item.isUpdated;
          }
          let createTime = item.createdAt.split(" ");
          this.$set(this.detail[index], 'createTime', createTime[0]);
          this.$nextTick(() => {
            this.showStars(this.detail[index].starRank, index);
          })
        })
        localStorage.setItem('commentDetail', JSON.stringify(this.detail));
      })
    },
    // 查看评价详情
    getCommentsDetail() {
      utilJs.getMethod(global.apiurl + "goods/commentDetail/" + this.id, res => {
        this.detail = [];
        if (res) {
          this.detail.push(res);
        }
        if (this.detail && this.detail.length == 1) {
          this.detail.forEach((item, index) => {
            this.checkTime(item.createdAt);
            this.isShowUpdate = item.isUpdated;
            let createTime = item.createdAt.split(" ");
            this.$set(this.detail[index], 'createdAt', createTime[0]);
            this.$nextTick(() => {
              this.showStars(this.detail[index].starRank, index);
            })
          })
          localStorage.setItem('commentDetail', JSON.stringify(this.detail));
        }
      })
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "", "", "", function () { }, true);
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  },
  activated() {
    setDocumentTitle("评价详情");
    this.wechatShare();
    this.type = this.$route.query.type ? this.$route.query.type : '';
    this.id = this.$route.query.id ? this.$route.query.id : '';
    this.detail = null;
    if (this.type == 1) {
      this.getOrderComment();
    } else {
      this.getCommentsDetail();
    }
  },
  deactivated() {
  }
}
</script>